<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置密码</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />

    <style>
        * {
            background: #e6e6e6;
        }

        .verify-safely {
            height: 48px;
            text-align: center;
        }

        .zi {
            padding: 23px 0px 12px 0px;
            height: 13px;
            font-size: 13px;
            color: #a7a6a6;
        }

        .num {
            color: #a7a6a6;
        }

        .verify-safe {
            height: 43px;
            padding: 10px 0px 0px 28px;
            background: #fff;
            border-bottom: 2px solid #e3e3e3;
            position: relative;
        }

        .in {
            color: #a7a6a6;
            background: #fff;
            margin-left: 32px;
            font-size: 13px;
        }

        .bttn {
            position: absolute;
            right: 18px;
            bottom: 17px;
            width:100px !important;
            height: 20px !important;
            color: #DAD9D9;
            background: #fff;
            border: 1px solid #fff;
            outline: medium;
            border-left: 1px solid #c3c3c3;
            padding-left: 14px;
        }

        .password {
            height: 50px;
            background: #fff;
            padding-left: 28px;
            line-height: 50px;
            border-bottom: 3px solid #e3e3e3;
            margin-top: 12px;
        }

        .ins {
            margin-left: 25px;
            color: #a7a6a6;
            background: #fff;
            font-size: 13px;
        }

        .verify-below {
            margin: 97px 27px 0px 27px;
            background: #ea5718;
            height: 38px;
            color: #fff;
            border-radius: 5px;
            text-align: center;
            line-height: 38px;
            font-size: 17px;
        }
        .codeactive {
            color: #EA5717;
        }
        #dao{
            color: #EA5717;
        }
    </style>
</head>

<body>
    <div id="vm">
        <div class="big-box">
            <div class="verify">设置密码
                <img src="../../image/login/back.png" class="back" onclick="closeWin()">
            </div>
            <div class="verify-safely">
                <div class="zi">
                    <span class="num">为了您的帐号安全，需要验证您的手机 +{{phonevalue}}</span>
                </div>
            </div>
            <div class="verify-safe">
                验证码
                <input type="text" placeholder="验证码" v-model="msg" class="ins"  v-on:input="msginput">
                <input type="button" class="bttn codeactive" value="获取验证码" v-on:click="countdown();" id="dao">
            </div>
            <div class="verify-safe">
                密&nbsp;&nbsp;&nbsp;码<input type="possword" placeholder="请输入新密码" class="in" v-model="passwordvalue" />
            </div>
            <div class="verify-below" v-on:click="submit()">
                完成
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
var uid;
    var vm = new Vue({
        el: '#vm',
        data: {
            msg: '',
            passwordvalue: '',
            phonevalue:'',
            guojianumber:''
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                var header = $api.byId('aui-header');
                $api.fixStatusBar(header);
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        methods: {
            init: function() {
                var _this = this;
                _this.passwordvalue = '';
                _this.msg = '';
                uid = $api.getStorage('uid');

                new rest().get('getUserInfo').datae({
                    uid: uid
                }).success(function(res) {
                    if (res.flag == 1) {
                        if(res.msg[0].mobile){
                          _this.phonevalue =res.msg[0].mobile
                        }
                    } else {
                        api.toast({
                            msg: res.msg[0],
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            msginput(){
              this.msg = this.msg.substr(0,4);
              if (this.msg) {
                  $('.bttn').addClass('codeactive');
              } else {
                  $('.bttn').removeClass('codeactive');
              }

            },
            addinput: function() {
                var _this = this;
                _this.passwordvalue = _this.passwordvalue.replace(/[^\w\/]/ig, '');
                _this.passwordvalue = _this.passwordvalue.substr(0, 16);
            },
            submit: function() {
                var _this = this;

                if(M.phone(_this.phonevalue)){
                    if (M.yanzhengma(_this.msg)) {
                        if (M.password(_this.passwordvalue)) {
                            new rest().get('rePassword').datae({
                                'mobile': _this.phonevalue,
                                'msg': _this.msg,
                                'password': _this.passwordvalue,
                            }).success(function(res) {
                                if (res.flag == 0) {
                                  api.toast({
                                      msg: res.msg,
                                      duration: 2000,
                                      location: 'middle'
                                  });
                                } else {
                                    api.toast({
                                        msg: '修改成功',
                                        duration: 2000,
                                        location: 'middle'
                                    });
                                    setTimeout(function() {
                                        api.closeWin();
                                    }, 200)
                                }

                            }).error(function(err) {
                                api.toast({
                                    msg: err.msg,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }).run()
                        }
                    }
}
            },
            countdown: function() {
                var _this = this,msgflag;
                var name = document.getElementById("dao").className;
                if (M.phone(_this.phonevalue)) {
                    new rest().get('sendSms').datae({
                        'mobile': _this.phonevalue
                    }).success(function(res) {
                        if (res.flag == 1) {
                            api.toast({
                                msg: '发送成功',
                                duration: 2000,
                                location: 'middle'
                            });
                            msgflag = true;
                            M.daojishi(msgflag, name)
                        } else {
                            msgflag = false;
                            M.daojishi(msgflag, name)
                            api.toast({
                                msg: res.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }).error(function(err) {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }).run()
                }
            },
        }
    })

    function closeWin() {
        api.closeWin();

    }
</script>

</html>
